<template>
    <div class="rank">
        <div class="g-wrapt tanxin">
           <img :src="playList.coverImgUrl" alt="">
           <div class="cnt">
                <div class="top">
                    <h2>{{playList.name}}</h2>
                </div>
                <div class="center tanxin">
                    <i></i>
                    <span>{{playList.description}}</span>
                    <span>(每天更新)</span>
                </div>
                <div class="btns tanxin">
                    <a href="javascript:;">
                        <i>播放</i>
                    </a>
                    <a href="javascript:;">
                    </a>
                    <a href="javascript:;">
                        <i>(3979168)</i>
                    </a>
                    <a href="javascript:;">
                        <i>(13003)</i>
                    </a>
                    <a href="javascript:;">
                        <i>下载</i>
                    </a>
                    <a href="javascript:;">
                        <i>(215423)</i>
                    </a>
                </div>
           </div>
        
        </div>
        <div class="g-wrap">
            <div class="u-title tanxin">
                <div class="left">
                    <h3 >歌曲列表</h3>
                    <span class="sub">100首歌</span>
                </div>
                <div class="more">
                    播放：<strong>5204059136</strong>次
                </div>
            </div>
            <div class="j-flag">
                <table class="m-table">
                    <thead>
                        <tr>
                            <th class="first"></th>
                            <th>
                                <div class="bt">标题</div>
                            </th>
                            <th class="w2-1">
                                <div class="sc">时长</div>
                            </th>
                            <th class="w3-1">
                                <div class="gs">歌手</div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in playList.tracks" :key="index">
                            <td>
                                <div class="spans">
                                    <span class="num">1</span>
                                    <span class="rk"></span>
                                </div>
                            </td>
                            <td>
                                <div>
                                    <img height="50" :src="item.al.picUrl" alt="">
                                    <span class="bf"></span>
                                    <b class="gm">{{item.name}}</b>
                                </div>
                            </td>
                            <td>
                                <span class="time">{{item.dt}}</span> 
                                <div style="display:none" onmouseenter="">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                            </td>
                            <td>
                                <span class="mx">{{item.ar[0].name}}</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>
<script>
import {playListApi,TopListApi} from "@/request/api"
export default {
    data () {
        return {
            playList:[],
        }
    },
    // watch:{
    //     '_props':{
    //         handler(newVal,oldVal){
    //             if(newVal != oldVal){
    //                 this._props = newVal;
    //             }
    //         },
    //         deep: true,
    //     }
    // },
    created(){
        // 19723756
        TopListApi().then(res => {
            // console.log(res);
            if(res.data.code === 200){
                let a = res.data.list[0].id
                // console.log(a);
                playListApi(a).then(res => {
                    console.log(res);
                    if(res.data.code = 200){
                        this.playList = res.data.playlist
                        console.log(this.playList);
                    }
                })
            }
        })
    }
}
</script>
<style lang = "less" scoped>
    @import "../../assets/base.less";
    .rank{
        border-right: 1px solid #ccc;
        width: 750px;
        background: #fff;
        padding-bottom: 50px;
        margin-top: 40px;
        .g-wrapt{
            padding: 0 40px;
            img{
                display: inline-block;
                width: 150px;
                height: 150px;
                background-color: pink;

            }
            .cnt{
                margin: 20px 30px 20px;
                .top{
                    h2{
                    font-size: 20px;
                    font-weight: normal;
                }

                }
                .center{
                    font-size: 13px;
                    margin: 10px 0 30px;
                    i{
                        display: inline-block;
                        width: 13px;
                        height: 13px;
                        /* border: 1px solid #000; */
                        background: url(../../assets/images/icon.png) no-repeat;
                        background-position: -18px -682px;
                    }
                    span{
                        color: #9999;
                        padding-left: 5px;
                    }
                }
                .btns{
                    margin-bottom: 25px;
                    a{
                       padding: 0 10px;
                       margin: 0 6px 0 0;
                       color: #333;
                       font-size: 12px;
                        &:nth-child(1){
                            display: inline-block;
                            width: 65px;
                            height: 30px;
                            line-height: 30px;
                            color: #fff;
                            padding: 0 5px 0 0;
                            white-space: nowrap;
                            background: url(../../assets/images/button2.png) no-repeat;
                            background-position: 0 -633px;
                            padding-right: 0;
                            margin-right: 0;
                            i{
                                margin-left: 5px;
                                display: inline-block;
                                font-style:inherit;
                                padding-left: 30px;
                            }
                        }
                        &:nth-child(2){
                            display: inline-block;
                            width: 30px;
                            height: 30px;
                            line-height: 30px;
                            padding: 0 5px 0 0;
                            margin-right: 6px;
                            white-space: nowrap;
                            background: url(../../assets/images/button2.png) no-repeat;
                            background-position: 0 -1588px;
                        }
                        &:nth-child(3){
                            display: inline-block;
                            width: 90px;
                            height: 31px;
                            line-height: 30px;
                            color: #333;
                            padding: 0 5px 0 0;
                            white-space: nowrap;
                            background: url(../../assets/images/button2.png) no-repeat;
                            background-position: 0 -977px;
                            border-right: 2px solid #ccc;
                            border-radius: 5px;
                            i{
                                display: inline-block;
                                font-style:inherit;
                                padding-left: 30px;
                            }
                        }
                        &:nth-child(4){
                            display: inline-block;
                            width: 77px;
                            height: 31px;
                            line-height: 30px;
                            color: #333;
                            padding: 0 5px 0 0;
                            white-space: nowrap;
                            background: url(../../assets/images/button2.png) no-repeat;
                            background-position: 0 -1225px;
                            border-right: 2px solid #ccc;
                            border-radius: 5px;
                            i{
                                display: inline-block;
                                font-style:inherit;
                                padding-left: 30px;
                            }
                        }
                        &:nth-child(5){
                            display: inline-block;
                            width: 59px;
                            height: 31px;
                            line-height: 30px;
                            color: #333;
                            padding: 0 5px 0 0;
                            white-space: nowrap;
                            background: url(../../assets/images/button2.png) no-repeat;
                            background-position: 0 -2761px;
                            border-right: 2px solid #ccc;
                            border-radius: 5px;
                            i{
                                display: inline-block;
                                font-style:inherit;
                                padding-left: 30px;
                            }
                        }
                        &:nth-child(6){
                            display: inline-block;
                            width: 85px;
                            height: 31px;
                            line-height: 30px;
                            color: #333;
                            padding: 0 5px 0 0;
                            margin-right: 6px;
                            white-space: nowrap;
                            background: url(../../assets/images/button2.png) no-repeat;
                            background-position: 0 -1465px;
                            border-right: 2px solid #ccc;
                            border-radius: 5px;
                            i{
                                display: inline-block;
                                font-style:inherit;
                                padding-left: 30px;
                            }
                        }

                    }
                }
              }
        }
        .g-wrap{
            padding: 0 30px 40px 40px;
            .u-title{
                    justify-content: space-between;
                    height: 33px;
                    border-bottom: 3px solid #c20c0c;
                    h3{
                        float: left;
                        font-size: 20px;
                        line-height: 28px;
                    }
                    span{
                        float: left;
                        margin: 9px 0 0 20px;
                        color:#666;
                    }
                    .more{
                        margin-top: 5px;
                        color:#666;
                        float: right;
                        strong{
                            color: #c20c0c;
                        }
                    }
            }
            .j-flag{
                .m-table{
                    width: 100%;
                    border: 1px solid #d9d9d9;
                    border-collapse: collapse;
                    border-spacing: 0;
                    table-layout: fixed;
                    th{
                            height: 38px;
                            background-color: #f7f7f7;
                            vertical-align: top;
                            text-align: left;
                            font-weight: normal;
                            color: #666;
                            line-height: 38px;
                            border-right: 1px solid #ccc;
                            border-bottom: 1px solid #ccc;
                            box-sizing: border-box;
                            &.first{
                                width: 77px;
                            }
                            &:nth-child(2){
                                width: 326px;
                            }
                            &:nth-child(3){
                                width: 91px;
                            }
                            &:nth-child(4){
                                width: 174px;
                            }
                            .bt{
                                width: 326px;
                                height: 18px;
                                line-height: 18px;
                                padding: 8px 10px;
                               }
                            .sc{
                                    width: 91px;
                                    height: 18px;
                                    line-height: 18px;
                                    padding: 8px 10px;
                                }
                            .gs{
                                width: 91px;
                                height: 18px;
                                line-height: 18px;
                                padding: 8px 10px;
                            }
                   }
                   tbody{
                        tr{
                            height: 70px;
                            td{
                                height: 100%;
                                &:nth-child(1){
                                    /* background: pink; */
                                    width: 100%;
                                    height: 100%;
                                    .spans{
                                        display: flex;
                                        height: 100%;
                                        justify-content: center;
                                        align-items: center;
                                        span{
                                            display: inline-block;
                                            color: #999;
                                            font-size: 12px;
                                            &.num{
                                                width: 25px;
                                                height: 18px;
                                                /* border: 1px     solid   #000; */
                                            }
                                            &.rk{
                                                width: 32px;
                                                height: 17px;
                                                /* border: 1px     solid   #000; */
                                                background: url(../../assets/images/icon.png) no-repeat;
                                                background-position: -67px -283px;
                                            }
                                        }
                                    }
                                }
                                &:nth-child(2){
                                    div{
                                        display: flex;
                                        align-items: center;
                                        img{
                                            margin-left: 10px;
                                        }
                                        .bf{
                                            width: 17px;
                                            height: 17px;
                                           
                                            margin-left: 10px;
                                            background: url(../../assets/images/table.png) no-repeat;
                                            background-position: 0 -103px;
                                        }
                                        .gm{
                                            margin-left: 10px;
                                        }
                                    }
                                }
                                &:nth-child(3){
                                    div{
                                        span{
                                            display: inline-block;
                                            width: 18px;
                                            height: 16px;
                                            &:nth-child(1){
                                                background: url(../../assets/images/icon.png) no-repeat;
                                                background-position: 2px -699px;
                                            }
                                            &:nth-child(2){
                                                background: url(../../assets/images/table.png) no-repeat;
                                                background-position: 0 -174px;
                                            }
                                            &:nth-child(3){
                                                background: url(../../assets/images/table.png) no-repeat;
                                                background-position: 0 -195px;
                                            }
                                            &:nth-child(4){
                                                background: url(../../assets/images/table.png) no-repeat;
                                                background-position: -81px -174px;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                   }
                }
            }
        }
    }

</style>